<template>
    <div class="lend-index">
        <!-- money-amount -->
        <input type="text" value='123'>
        <div class="money-amount">
            <div class="money-amount-header lend">
                <div class="money-amount-header__left">
                    <p class="font-headline">2000.00</p>
                    <p class="font-caption">待还借款</p>
                </div>
                <div class="money-amount-header__right">
                    <p class="font-headline">0.00</p>
                    <p class="font-caption">逾期待还</p>
                </div>
            </div>
            <div class="money-amount-footer">
                <div class="money-amount-footer__left">
                    <div class="money-amount-footer__item">
                        <p class="font-headline">2000.00</p>
                        <p class="font-caption">7天待还</p>
                    </div>
                    <div class="money-amount-footer__item">
                        <p class="font-headline">2000.00</p>
                        <p class="font-caption">30天待还</p>
                    </div>
                </div>
                <div class="money-amount-footer__right">
                    <div class="money-amount-footer__item">
                        <p class="font-headline">3</p>
                        <p class="font-caption">逾期借条</p>
                    </div>
                </div>
            </div>
        </div>


        <!-- message -->
        <div class="message">
            <span class='message__avatar'>
                <img src="../images/Group.png" alt="">
            </span>
            <p class='message__text'>李彬已同意您的借款申请</p>
        </div>
        <div class="card">
            <div class="want-loan">
                <span class="want-loan__button">我要借款</span>
                <p class="want-loan__text">我要借款我要借款</p>
            </div>
        </div>
        <div class="card fundraising-card">
            <div class="card__header">
                <div class="loan-money">
                    <p class="loan-money__amount orange">500元</p>
                    <p class="loan-money__info"><i>3天</i><i>5%年化</i></p>
                </div>
                <div class="fundraising-info">
                    <p class='font-body1'>筹款中</p>
                    <p class='font-caption'>4个意向</p>
                </div>
            </div>
            <div class="card-detail">
                <ul class="loan-info">
                    <li class="loan-info__item">借款日期：2017/02/23</li>
                    <li class="loan-info__item">借款用途：周转</li>
                    <li class="loan-info__item">服务费：5% | 30元</li>
                </ul>
            </div>
        </div>

        <!-- 我的借条 -->
        <h1 class="big-title">我的借条</h1>
        <div class="card">
            <div class="card__header">
                <div class="loan-money">
                    <p class="loan-money__amount">500元</p>
                    <p class="loan-money__info"><i>3天</i><i>5%年化</i></p>
                </div>
                <div class="loan-user-info">
                    <span class="loan-user-info__avatar"><img src="../images/Group.png" alt=""></span>
                    <div class="loan-user-info__box">
                        <p class='loan-user-info__name'>李彬</p>
                        <p class='loan-user-info__phone'>15678901231</p>
                    </div>
                </div>
            </div>
            <div class="card-detail">
                <ul class="loan-info">
                    <li class="loan-info__item">借款日期：2017/02/23</li>
                    <li class="loan-info__item">借款用途：周转</li>
                    <li class="loan-info__item">服务费：5% | 30元</li>
                </ul>
                <p class="loan-info__item">距离还款日期还有1天</p>
                <div class="loan-current">
                    <div class="loan-current__money">
                        <span class="loan-current__text">本期待还</span>
                        <p class="loan-current__number">1000.00</p>
                    </div>
                    <span class="loan-current__button" @click='test'>立即还款</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword
        },
        data() {
            return {
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){
            document.title = '借款'
            this.getAccount()
            this.getList(1)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .fundraising-info{
        color:rgba(#000,.54);
        .font-body1{
            color:$orange;
        }
    }
    .want-loan{
        padding-top: 6px;
    }
    .want-loan__button{
        @extend %font-button;
        transition:background ease .3s;
        display: block;
        margin:0 auto;
        color: #fff;
        text-align: center;
        background:$orange;
        box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.12);
        border-radius:2px;
        width:159px;
        line-height:35px;
        &:active{
            background-color: darken($orange,5%);
        }
    }
    .want-loan__text{
        @extend %font-caption;
        padding-top: 6px;
        text-align: center;
    }

</style>
